<template>
    <div>
      <van-nav-bar
        title="模拟选座"
        left-arrow
      />
        <van-grid :gutter="5" :column-num="7" v-for="row in seatList" :key="row.rowIndex">
          <van-grid-item v-for="l in row.left" :icon="l.icon" :text="l.index + l.label" :key="l.index" @click="clickItem(l.index)" />
          <div class="tongdao">&nbsp;</div>
          <van-grid-item v-for="r in row.right" :icon="r.icon" :text="r.index + r.label" :key="r.index" @click="clickItem(r.index)" />
        </van-grid>
        <van-tabbar v-model="active" active-color="#4d1360" inactive-color="#000">
          <van-tabbar-item icon="wap-home-o">选座</van-tabbar-item>
          <van-tabbar-item icon="user-o">关于我们</van-tabbar-item>
        </van-tabbar>
        <van-dialog v-model="show" title="输入昵称" show-cancel-button :lazy-render="false" @confirm="confirmName">
          <van-field
            type="text"
            v-model="nickName"
            rows="2"
            autosize
            autofocus
            maxlength="50"
            placeholder="请输入昵称"
            show-word-limit
            class="message"
          />
        </van-dialog>
    </div>
</template>
<script>
import SockJS from 'sockjs-client';
import { Client } from '@stomp/stompjs';
import { v4 as uuidv4 } from 'uuid';
export default {
    data() {
        return {
          seatList: [],
          seatMap:[],
          nickName:'',
          show: false,
          currIndex: null,
          uuid: uuidv4()
        }
    },
    methods: {
      confirmName(){
        this.login()
      },
      connect() {
        // 创建 SockJS 连接
        const socket = new SockJS('http://localhost:8080/ws');
        const client = new Client({
          webSocketFactory: () => socket,
          debug: (str) => {
            console.log(new Date(), str);
          },
          onConnect: () => {
            console.log('Connected');
            client.subscribe('/topic/greetings', (message) => {
              this.showMessage(JSON.parse(message.body).content);
            });
          },
          onStompError: (frame) => {
            console.log('Broker reported error: ' + frame.headers['message']);
            console.log('Additional details: ' + frame.body);
          },
        });

        client.activate();
        this.client = client;
      },
      login() {
        if (this.client && this.client.connected) {
          this.client.publish({
            destination: '/app/login',
            body: JSON.stringify({ 'name': this.nickName, 'uuid': this.uuid}),
          });
        }
      },
      lockSeat() {
        if (this.client && this.client.connected) {
          this.client.publish({
            destination: '/app/lockSeat',
            body: JSON.stringify({ 'name': this.nickName, 'uuid': this.uuid, 'index': this.currIndex }),
          });
        }
      },
      showMessage(message) {
        this.seatList = message;
        this.seatMap = [];
        for(var i = 0;i < message.length; i ++){
          for(var l = 0;l < message[i].left.length; l ++){
            this.seatMap[message[i].left[l].index] = message[i].left[l]
          }
          for(var r = 0;r < message[i].right.length; r ++){
            this.seatMap[message[i].right[r].index] = message[i].right[r]
          }
        }
      },
      clickItem: function(index) {
        // 处理旧座位
        // if(this.currIndex && index != this.currIndex){
        //   const currCell = this.seatMap[this.currIndex];
        //   currCell.icon = 'imgs/empty.png';
        //   currCell.label = index;
        // }
        // // 处理新座位
        // const currentIcon = this.seatMap[index].icon;
        // const newIcon = currentIcon === 'imgs/empty.png' ? 'imgs/used.png' : 'imgs/empty.png';
        // this.seatMap[index].icon = newIcon;
        // this.seatMap[index].label = index + '[' + this.nickName + ']';
        this.currIndex = index;
        this.lockSeat()
      }
    },
    mounted() {
      this.connect();
      if(!this.nickName){
        this.show = !this.nickName;
      }
    }
}
</script>
<style>
.tongdao {
  padding: 2rem;
}

.van-grid {
  width: 70%;
  margin: 0 auto;
}

</style>